<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>通讯录</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Dazzling Multi Forms Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="/phonebook/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="/phonebook/stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" />
<!-- js -->
<script src="/phonebook/js/jquery-2.2.3.min.js"></script> 
<!-- //js -->

<!-- <link href="//fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"> -->
</head>
<body>
	<div class="main">
		<h1>通讯录</h1>
		<p class="agile_para">软件1501 梅王清 1512190328</p>
		<div class="w3_agile_main_grids">
			<section class="slider">
				<div class="flexslider">
					<ul class="slides">
							<div class="agileits_w3layouts_main_grid">
								<h3>修改联系人</h3>
								<form onsubmit="return updatePerson()" >
								<span>
										<label>电话</label>
										<input name="Mobile" id="number" type="text" placeholder="Mobile Number" required="">
									</span>
									<span>
										<label>姓名</label>
										<input name="Name" id="name" type="text" placeholder="Your Name" required="">
									</span>
									<!-- <span>
										<label>性别</label>
										<input name="Sex" type="text" placeholder="Your Sex" required="">
									</span> -->
									<span>
										<label>性别</label>
										<select id="sex" required="">
											<option value="男">男</option>
											<option value="女">女</option>
										</select>
									</span>
									
									<span>
										<label>地址</label>
										<input name="Address" id="address" type="text" placeholder="Your Address" required="">
									</span>
									<span>
										<label>e-mail</label>
										<input name="Email" id="email" type="email" placeholder="Your Email" required="">
									</span>
									
									<div class="w3_agileits_submit">
										<input id="addPerso" type="submit" value="提交">
										<input type="reset" value="重置">
									</div>
								</form>
							</div>
					</ul>
				</div>
			</section>
		</div>
		<div class="agileits_copyright">
			<!-- <p>如果想要添加联系人,请点击<a href="//w3layouts.com/">添加联系人</a></p> -->
			<p>软件1501 梅王清 1512190328</p>
		</div>
	</div>
<!-- password -->
	<!-- <script type="text/javascript">
		window.onload = function () {
			document.getElementById("password1").onchange = validatePassword;
			document.getElementById("password2").onchange = validatePassword;
		}
		function validatePassword(){
			var pass2=document.getElementById("password2").value;
			var pass1=document.getElementById("password1").value;
			if(pass1!=pass2)
				document.getElementById("password2").setCustomValidity("Passwords Don't Match");
			else
				document.getElementById("password2").setCustomValidity('');	 
				//empty string means no validation error
		}
	</script> -->
<!-- password -->
<!-- flexSlider -->
	<script defer src="/phonebook/js/jquery.flexslider.js"></script>
	<!-- <script type="text/javascript">
		$(window).load(function(){
		  $('.flexslider').flexslider({
			animation: "slide",
			start: function(slider){
			  $('body').removeClass('loading');
			}
		  });
		});
	</script> -->
<!-- //flexSlider -->
</body>
<script>
$(document).ready(function() {
		var url = location.search;
		var str;
		if (url.indexOf("?") != -1) {
			str = url.substring(url.lastIndexOf("?", 0) + 4, url.length);
		}
		//alert(str);
		$.ajax({
			type : "GET",
			contentType : "applicaiton/json",
			dataType : "Json",
			url : "/phonebook/person/" + str,
			success : function(data) {
				if (data.code == 200)
					showData(data);
			},
			error : function() {
				alert("服务器开小差了");
			}
		});

	});
	
	function showData(data) {
		if (data.person.number != null) {
			$("#number").attr("value", data.person.number);
		} else {
			$("#number").attr("value", "");
		}
		if (data.person.name != null) {
			$("#name").attr("value", data.person.name);
		} else {
			$("#name").attr("value", "");
		}
		if (data.person.sex != null) {
			$("#sex").attr("value", data.person.sex);
		} else {
			$("#sex").attr("value", "男");
		}
		if (data.person.address != null) {
			$("#address").attr("value", data.person.address);
		} else {
			$("#address").attr("value", "");
		}
		if (data.person.email != null) {
			$("#email").attr("value", data.person.email);
		} else {
			$("#email").attr("value", "");
		}

	}

	function updatePerson() {
		//alert($("#name").val());
		var url = location.search;
		var id;
		if (url.indexOf("?") != -1) {
			id = url.substring(url.lastIndexOf("?", 0) + 4, url.length);
		}
		//alert(id);
		var number=$("#number").val();
		var name = $("#name").val();
		var sex = $("#sex").val();
		var address = $("#address").val();
		var email = $("#email").val();
		var person = {};
		person["id"]=id;
		person["number"] = number;
		person["name"] = name;
		person["sex"] = sex;
		person["address"] = address;
		person["email"] = email;
		//alert(JSON.stringify(person));
		$.ajax({
			type : "PUT",
			contentType : "application/json",
			dataType : "Json",
			data : JSON.stringify(person),
			url : "/phonebook/updatePerson",
			success : function(data) {
			if (data.code == 200) {
					alert("修改成功");
					window.location.href = "index.jsp";
				}
				if (data.code == 500)
					alert("您输入的电话号码已存在");
				
			},
			error : function() {
				alert("服务器开小差了");
			}
		});
	return false;
	}
	
/* 	$("#updatePerson").click(function() {
		//alert($("#name").val());
		var url = location.search;
		var id;
		if (url.indexOf("?") != -1) {
			id = url.substring(url.lastIndexOf("?", 0) + 4, url.length);
		}
		var number=$("#number").val();
		var name = $("#name").val();
		var sex = $("#sex").val();
		var address = $("#address").val();
		var email = $("#email").val();
		var person = {};
		person["id"]=id;
		person["number"] = number;
		person["name"] = name;
		person["sex"] = sex;
		person["address"] = address;
		person["email"] = email;
		alert(JSON.stringify(person));
		$.ajax({
			type : "PUT",
			contentType : "application/json",
			dataType : "Json",
			data : JSON.stringify(person),
			url : "updatePerson",
			success : function(data) {
				if (data.code == 500)
					alert("您输入的电话号码已存在");
				if (data.code == 200) {
					alert("修改成功");
					window.location.href = "index.jsp";
				}
			},
			error : function() {
				alert("服务器开小差了");
			}
		});

	}); */

/* function addPerson(){

var number = $("#number").val();
if(number==""||number==null){
alert("请输入电话号码");
return;
}
var name = $("#name").val();
var sex = $("#sex").val();
//alert(sex);
var address = $("#address").val();
var email = $("#email").val();
var person = {};
person["number"] = number;
person["name"] = name;
person["sex"] = sex;
person["address"] = address;
person["email"] = email;
//alert(JSON.stringify(person));
$.ajax({
type:"POST",
url:"/phonebook/addPerson",
data:JSON.stringify(person),
contentType:"application/json",
dataType:"Json",
success:function(data){if(data.code==200){ alert("添加成功");window.location.href="index.jsp"}
if(data.code==500)alert("该电话号码已存在,添加失败");},
error:function(){alert("服务器出错");}
});


return false;
} */


</script>
</html>